<!-- 控件页面 -->
<template>
    <!-- 顶部胶囊 -->
    <edit-main-nav-capsule :style="{ color: customTopNavData.eles.customFeature.style.color }" />

    <!-- 顶部导航栏 -->
    <div>
        <widget-view
            :element="customTopNavData"
            hide-drag-btn
            hide-delete-btn
            hide-contextmenu
        />
    </div>


    <el-scrollbar
        ref="scrollRef"
        always
        class="app-phone-scroll"
    >
        <div :style="phoneBackgrounStyle" class="app-phone-bg"></div>
        <draggable
            v-model="widgetList"
            v-bind="{
                ...draggableConfig,
                disabled: disabledDraggable
            }"
            :style="draggableStyle"
            class="app-phone-content"
            @change="onDragChange"
        >
            <template #item="{ element, index }">
                <div
                    v-if="!['custom-top-nav', 'suspension', 'new-suspension', 'sidebar', 'popup-window'].includes(element.eles.type)"
                    class="content-item"
                >
                    <widget-view :element="element" />
                </div>
            </template>
            <template #footer v-if="showAddComponentBtn || showAddCombinationBtn">
                <div class="app-phone-content-footer">
                    <div v-if="showAddComponentBtn" class="add-widget-btn" @click="onAddComponent">
                        添加组件
                    </div>
                    <div v-if="showAddCombinationBtn" class="add-widget-btn" @click="onAddCombination">
                        添加组合
                    </div>
                </div>
            </template>
        </draggable>

        <edit-main-disable-drag-mark :style="{
            left: '4px',
            width: 'calc(100% - 8px)'
        }"/>

        <!-- 一些特殊的控件集 -->
        <edit-main-special-widgets />
    </el-scrollbar>

    <!-- 控件菜单 -->
    <widget-contextmenu />
    <!-- 控件动画设置弹窗 -->
    <widget-animations-setting />
    <!-- 底部导航栏 -->
    <edit-main-tabbar />
    <!-- 工具栏 -->
    <edit-main-tools />
    <!-- 模板弹窗 -->
    <template-drawer ref="templateDrawerRef" />
</template>

<script>
import { defineComponent, ref, computed, onMounted } from 'vue'
import { useEditStore } from '@/store'
import useWidget from '@/libs/edit/widgetData'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import usePageHistory from '@/libs/edit/pageHistory'
import useWidgetView from '@/libs/edit/widgetView'
import usePhoneView from '@/libs/edit/phoneView'
import testWidgetTypeAdd from '@/libs/edit/testWidgetTypeAdd'
import { createComponentAttr } from '@/libs/edit'
import { deepClone } from '@/libs/tools'
import TemplateDrawer from '@/components/edit/template-drawer'
import WidgetContextmenu from '@/components/edit/widget-contextmenu'
import WidgetAnimationsSetting from '@/components/edit/widget-animations-setting'
import customTopNav from '@/components/edit/template-data/widget-data/custom-top-nav'
import { setLeftTabActive } from '@/view/edit/components/edit-left'
import EditMainNavCapsule from '../edit-main-nav-capsule'
import EditMainSpecialWidgets from '../edit-main-special-widgets'
import EditMainTabbar from '../edit-main-tabbar'
import EditMainTools from '../edit-main-tools'
import EditMainDisableDragMark from '../edit-main-disable-drag-mark'
export default defineComponent({
    name: 'EditMainPage',
    components: {
        TemplateDrawer,
        WidgetContextmenu,
        WidgetAnimationsSetting,
        EditMainNavCapsule,
        EditMainSpecialWidgets,
        EditMainTabbar,
        EditMainTools,
        EditMainDisableDragMark
    },
    setup() {
        const editStore = useEditStore()

        const {
            widgetList
        } = useWidget()

        const {
            draggableConfig,
            draggableHandleName,
            draggableWidget
        } = useWidgetDraggable()

        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            getWidgetViewDom
        } = useWidgetView()

        const {
            onScrollTopId
        } = usePhoneView()
        
        const pageType = computed(() => editStore.pageType)

        const disabledDraggable = computed(() => {
            const testData = testWidgetTypeAdd({
                widgetList: widgetList.value,
                widgetTypes: draggableWidget.value.from === 'template' ? [draggableWidget.value.widgetType] : [],
                pageType: pageType.value
            })
            return !testData.status
        })

        // 自定义导航栏控件数据
        const customTopNavData = computed(() => {
            let data = {}
            if (widgetList.value?.[0]?.eles?.type === 'custom-top-nav') {
                data = widgetList.value[0]
            } else {
                const defaultTopNavData = deepClone(customTopNav)
                createComponentAttr(defaultTopNavData)
                data = defaultTopNavData
                Object.assign(data.eles.customFeature, {
                    'title': pageData.value?.customFeature?.name,
                    'color': pageData.value?.customFeature?.titleColor,
                    'background-color': pageData.value?.customFeature?.titleBackgroundColor
                })
            }
            return data
        })
        // 评论控件数据
        const bbsData = computed(() => widgetList.value.find(item => item.eles.type === 'bbs'))

        const pageData = computed(() => editStore.pageData)
        // 背景样式
        const phoneBackgrounStyle = computed(() => {
            const backgroundColor = pageData.value?.customFeature?.['background-color']
            const backgroundImage = pageData.value?.customFeature?.['background-image']
            return {
                backgroundColor,
                backgroundImage: backgroundImage ? `url(${backgroundImage})` : ''
            }
        })

        // 显示添加组件按钮
        const showAddComponentBtn = computed(
            () => (widgetList.value.length === 0)
                || (widgetList.value.length === 1 && widgetList.value?.[0]?.eles?.type === 'custom-top-nav')
        )
        // 显示添加组合按钮
        const showAddCombinationBtn = computed(
            () => !showAddComponentBtn.value
                && !widgetList.value.some(item => ['bbs'].includes(item.eles.type))
        )

        const scrollRef = ref(null)
        const draggableStyle = ref({})
        onMounted(() => {
            draggableStyle.value = {
                minHeight: `${scrollRef.value.$el.offsetHeight}px`
            }
            // 接收滚动条定位事件
            onScrollTopId(id => {
                let top = 0
                let dom = getWidgetViewDom(id)
                while((dom !== scrollRef.value?.$el) && !!dom) {
                    top += dom?.offsetTop || 0
                    dom = dom.offsetParent
                }
                scrollRef.value.setScrollTop(top - 60)
            })
        })

        const onDragChange = e => {
            if (e.moved || e.added) {
                onAddPageHistory()
            }
        }

        // 添加组件
        const onAddComponent = () => {
            // 打开控件设置面板
            setLeftTabActive('widget')
        }

        const templateDrawerRef = ref(null)
        // 添加组合
        const onAddCombination = () => {
            templateDrawerRef.value.show({
                type: 'combination-template'
            })
        }
        
        return {
            widgetList,
            draggableConfig,
            draggableHandleName,
            disabledDraggable,

            customTopNavData,
            bbsData,
            
            scrollRef,
            draggableStyle,
            phoneBackgrounStyle,

            showAddComponentBtn,
            showAddCombinationBtn,

            onDragChange,

            onAddComponent,

            templateDrawerRef,
            onAddCombination
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main-page.less';
</style>